<template>
    <div style="width: 168px">
        <div class="header-title">
            <div class="panel-big-title" style="margin-bottom: 0">声</div>
            <div class="tabs-box">
                <TabBtnGroup v-model="selectTab" :tab-list="tabs" />
            </div>
        </div>
        <BasePanel width="100%" height="260px" title="功能区昼间噪声">
            <template #default>
                <div class="panel-content">
                    <div class="label">（{{ selectYear }}年）</div>
                    <div class="label">达标率</div>
                    <div class="charts-box">
                        <BaseEcharts v-if="pieChartOptions" :options="pieChartOptions" />
                    </div>
                </div>
            </template>
        </BasePanel>
    </div>
</template>

<script setup lang="ts">
import TabBtnGroup from '@/components/TabBtnGroup/index.vue'
import BasePanel from '@/components/BasePanel/index.vue'
import BaseEcharts from '@/components/BaseEcharts/index.vue'
// import { useGlobalStore } from '@/store/global';
import dayjs from 'dayjs'

// tab切换
const selectTab = ref('rate')
const tabs = [
    { label: '达标率', value: 'rate' },
    { label: '预警', value: 'warning' },
]

// 全局数据
// const globalStore = useGlobalStore()

// 选择的年份
const selectYear = ref(dayjs().year())

// 图表配置项目
const pieChartOptions = shallowRef({
    title: {
        text: '96.6%',
        x: 'center',
        y: 'center',
        textStyle: {
            color: 'rgba(1, 254, 133, 1)',
            fontSize: '24',
            fontFamily: 'Oswald',
        },
    },
    legend: {
        show: false,
    },
    series: [
        {
            name: 'circle',
            type: 'pie',
            clockWise: true,
            radius: ['80%', '99%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            data: [
                {
                    value: 96.6,
                    name: '占比',
                    itemStyle: {
                        normal: {
                            color: 'rgba(1, 254, 133, 1)',
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                        },
                    },
                },
                {
                    name: '剩余',
                    value: 3.4,
                    itemStyle: {
                        normal: {
                            color: 'rgba(122, 122, 122, 1)',
                        },
                    },
                },
            ],
        },
    ],
})

// 面板数据
</script>

<style lang="scss" scoped>
.header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;

    .tabs-box {
        width: 120px;
    }
}

.panel-content {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-direction: column;

    .label {
        font-size: 20px;
        font-weight: 700;
        height: 20px;
        line-height: 20px;
        color: rgba(255, 255, 255, 1);
        margin-bottom: 12px;
    }

    .charts-box {
        flex: 1;
        height: 0;
        width: 100%;
    }
}
</style>
